<template>
  <div class="posttable">
    <div v-if="!show">
      <el-row style="background-color: #fff;margin-bottom:40px;">
        <el-row type="flex" justify="space-between">
          <el-col :span="4" class="tabletitle">
            <h4>我的任务</h4>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="23">
            <el-table
              ref="singleTable"
              highlight-current-row
              :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              class="tableT"
            >
              <el-table-column
                prop="customerName"
                label="客户简称"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="no"
                label="需求编号"
                width="160"
              >
              </el-table-column>
              <el-table-column
                label="需求名称"
                width="150"
              >
                <template slot-scope="scope">
                  <!-- prop="name" -->
                  <span style="cursor: pointer; color:#1198ff;" @click="viewdetail(scope.row)">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="postLevel"
                label="职位级别"
                width="100">
              </el-table-column>
              <el-table-column
                prop="introducer"
                label="发布人"
                width="80">
              </el-table-column>
              <el-table-column
                prop="area"
                label="所属区域"
                width="90">
              </el-table-column>
              <el-table-column
                prop="number"
                label="需求人数"
                width="90"
              >
              </el-table-column>
              <el-table-column label="需求星级" width="100">
                <template slot-scope="scope">
                <span v-if="scope.row.star == 4" style="color:#FF1C1D;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  
                  <span v-if="scope.row.star == 3" style="color:#2931FE;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  
                  <span v-if="scope.row.star == 2" style="color:#F727FF;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="scope.row.star == 1" style="color:#FFC027;">
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="scope.row.star == 0" style="color:#04344a;">
                  <i class="el-icon-star-off"></i>
                </span>
                </template>
              </el-table-column>
              <el-table-column label="主要招聘专员" width="180">
                <template slot-scope="scope" v-if="scope.row.hr">
                  <el-button
                    size="mini"
                    v-for="item in scope.row.hr"
                    :key="item"
                    style="background-color: #3598f9;color: #fff;"
                  >{{item}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="辅助招聘专员" width="180">
                <template slot-scope="scope" v-if="scope.row.hrSup">
                  <el-button
                    size="mini"
                    v-for="item in scope.row.hrSup"
                    :key="item"
                    style="background-color: #50c188;color: #fff;"
                  >{{item}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="salaryCap"
                label="薪资上限"
                width="120">
                <template slot-scope="scope">
                  <span>{{scope.row.salaryCap}}k*{{scope.row.salaryNum}}</span>
                </template>
              </el-table-column>
              <el-table-column label="关键词" width="340">
                <template slot-scope="scope" v-if="scope.row.ordinaryKeywords">
                  <el-button
                    size="mini"
                    v-for="item in scope.row.ordinaryKeywords"
                    :key="item"
                    style="background-color: #3598f9;color: #fff;"
                  >{{item}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column type="expand" label="功能区" width="80">
                <template slot-scope="props">
                  <el-row>
                    <el-col :span="9" :offset="1">
                      <div class="duty">职位职责</div>
                      <el-input
                        type="textarea"
                        v-model="props.row.duty"
                        :rows="props.row.dutyLen"
                        disabled resize="none">
                      </el-input>
                    </el-col>
                    <el-col :span="9" :offset="2">
                      <div class="duty">任职要求</div>
                      <el-input
                        type="textarea"
                        v-model="props.row.require"
                        :rows="props.row.requireLen"
                        disabled resize="none">
                      </el-input>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <div class="pager">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="pagehandleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcount"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-row>
      <el-row style="background-color: #fff;margin-bottom:40px;">
        <el-row type="flex" justify="space-between">
          <el-col :span="4" class="tabletitle">
            <h4>相似任务</h4>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="23">
            <el-table
              ref="singleTable"
              highlight-current-row
              :data="tableData1.slice((currentPage1-1)*pagesize1,currentPage1*pagesize1)"
              class="tableT"
            >
              <el-table-column
                prop="customerName"
                label="客户简称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="no"
                label="需求编号"
                width="160"
              >
              </el-table-column>
              <el-table-column
                label="需求名称"
                width="150">
                <template slot-scope="scope">
                  <!-- prop="name" -->
                  <span style="cursor: pointer; color:#1198ff;" @click="viewdetail(scope.row)">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="postLevel" label="职位级别" width="100"></el-table-column>
              <el-table-column prop="introducer" label="发布人" width="80"></el-table-column>
              <el-table-column prop="area" label="所属区域" width="90"></el-table-column>
              <el-table-column prop="number" label="需求人数" width="90"></el-table-column>
              <el-table-column label="需求星级" width="100">
                <template slot-scope="scope">
                <span v-if="scope.row.star == 4" style="color:#FF1C1D;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  
                  <span v-if="scope.row.star == 3" style="color:#2931FE;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  
                  <span v-if="scope.row.star == 2" style="color:#F727FF;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="scope.row.star == 1" style="color:#FFC027;">
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="scope.row.star == 0" style="color:#04344a;">
                  <i class="el-icon-star-off"></i>
                </span>
                </template>
              </el-table-column>
              <el-table-column label="主要招聘专员" width="180">
                <template slot-scope="scope" v-if="scope.row.hr">
                  <el-button
                    size="mini"
                    v-for="item in scope.row.hr"
                    :key="item"
                    style="background-color: #3598f9;color: #fff;"
                  >{{item}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="辅助招聘专员" width="180">
                <template slot-scope="scope" v-if="scope.row.hrSup">
                  <el-button
                    size="mini"
                    v-for="item in scope.row.hrSup"
                    :key="item"
                    style="background-color: #50c188;color: #fff;"
                  >{{item}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="salaryCap" label="薪资上限" width="120"></el-table-column>
              <el-table-column label="关键词" width="340">
                <template slot-scope="scope" v-if="scope.row.ordinaryKeywords">
                  <el-button
                    size="mini"
                    v-for="item in scope.row.ordinaryKeywords"
                    :key="item"
                    style="background-color: #3598f9;color: #fff;"
                  >{{item}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column type="expand" label="功能区" width="80">
                <template slot-scope="props">
                  <el-row>
                    <el-col :span="9" :offset="1">
                      <div class="duty">职位职责</div>
                      <el-input
                        type="textarea"
                        v-model="props.row.duty"
                        :rows="props.row.dutyLen"
                        disabled resize="none">
                      </el-input>
                    </el-col>
                    <el-col :span="9" :offset="2">
                      <div class="duty">任职要求</div>
                      <el-input
                        type="textarea"
                        v-model="props.row.require"
                        :rows="props.row.requireLen"
                        disabled resize="none">
                      </el-input>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <div class="pager">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="pagehandleCurrentChange1"
                :current-page="currentPage1"
                :page-sizes="[5,10,15]"
                :page-size="pagesize1"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcount1"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      
      </el-row>
    </div>
    
    <demand-name :ID="ID" v-if="show"></demand-name>
  </div>
</template>

<script>
  import axios from 'axios';
  import qs from 'qs';
  import DemandName from './demandname'
  
  export default {
    name: "mytask",
    props: {
      id: ''
    },
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pagesize: 5,
        totalcount: null,
        tableData1: [],
        currentPage1: 1,
        pagesize1: 5,
        totalcount1: null,
        ID: '',
        show: false
      }
    },
    created() {
      axios.post(this.url + '/todaytask/queryownandsimilartask', qs.stringify({
        id: this.id
      })).then(res => {
        this.unlogin(res.data.code);
        
        if (res.data.code == 200) {
          this.tableData.push(res.data.data.owntask);
          
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].hr = this.tableData[i].hr.split(',');
            this.tableData[i].hrSup = this.tableData[i].hrSup.split(',');
            if (this.tableData[i].hr.length == 1 && this.tableData[i].hr[0] == "") {
              this.tableData[i].hr = null
            };
            if (this.tableData[i].hrSup.length == 1 && this.tableData[i].hrSup[0] == "") {
              this.tableData[i].hrSup = null
            };
            
            if (this.tableData[i].ordinaryKeywords == null) {
              this.tableData[i].ordinaryKeywords = ""
            }
            this.tableData[i].ordinaryKeywords = this.tableData[i].ordinaryKeywords.split(",")
            if (this.tableData[i].ordinaryKeywords.length == 1 && this.tableData[i].ordinaryKeywords[0] == "") {
              this.tableData[i].ordinaryKeywords = null
            }
          }
          this.tableData1 = res.data.data.similartask;
          
          for (var i = 0; i < this.tableData1.length; i++) {
            
            this.tableData1[i].hr = this.tableData1[i].hr.split(',');
            
            this.tableData1[i].hrSup = this.tableData1[i].hrSup.split(',');
            if (this.tableData1[i].hr.length == 1 && this.tableData1[i].hr[0] == "") {
              this.tableData1[i].hr = null
            };
            if (this.tableData1[i].hrSup.length == 1 && this.tableData1[i].hrSup[0] == "") {
              this.tableData1[i].hrSup = null
            };
            
            
            if (this.tableData1[i].ordinaryKeywords == null) {
              this.tableData1[i].ordinaryKeywords = ""
            };
            this.tableData1[i].ordinaryKeywords = this.tableData1[i].ordinaryKeywords.split(",");
            if (this.tableData1[i].ordinaryKeywords.length == 1 && this.tableData1[i].ordinaryKeywords[0] == "") {
              this.tableData1[i].ordinaryKeywords = null;
            }
          }
          this.totalcount = this.tableData.length;
          this.totalcount1 = this.tableData1.length;
        }
      })
    },
    components: {
      DemandName
    },
    methods: {
      handleSizeChange(val) {
        this.pagesize = val
      },
      handleSizeChange1(val) {
        this.pagesize1 = val
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val
      },
      pagehandleCurrentChange1(val) {
        this.currentPage1 = val
      },
      viewdetail(val) {
        this.ID = val.id;
        this.show = !this.show;
        this.$emit('requireTask');
      }
    }
  }
</script>


<style scoped>
  
  .tabletitle {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .demo-table-expand {
    font-size: 0;
  }
  
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  
  .duty {
    font-size: 14px;
    font-weight: 700;
    color: #47adff;
    text-align: left;
    margin-left: 18px;
  }
</style>
